<template>
    <div class="sidebar">
		<ul>
			<li v-for="(item,index) in menuList" :key="index" :class='flag==index?"current":""' @click="changeTab(1,item,index)">
				<template>
					<!-- <img :src='flag==index?item.src:item.icon'> -->
					<span slot="title">{{ item.name }}</span>
				</template>
				
				<div v-if="item.children && item.children.length && flag == 3">
					<div v-for="(obj,idx) in item.children" :key="idx" :class='itemFlag==idx?"item-active":""' @click.stop="changeTab(2,obj,idx)" class="menu-item">{{ obj.name }}</div>
				</div>
			</li>
		</ul>
    </div>
</template>
<script>
	import utils from '@/assets/js/utils';
export default {
    data() {
        return {
			flag:0,
			itemFlag:-1,
            menuList: [
				{name:"模型广场",url:"./model-square"},
				{name:"创作指南",url:"./create-guide"},
				{name:"我要创作",url:"./create-model"},
				{
					name:"个人中心",
					children:[]
				},
			],
			subMenuList:[
				{name:"我的作品",url:"./my-work"},
				{name:"我的收藏",url:"./my-collect"},
				{name:"我的积分",url:"./my-integral"}
			],
			teacherlist:[
				{name:"我的学生",url:"./my-student"},
				{name:"学生作品",url:"./student-work"}
			]
        };
    },
	
	created() {
		const userType = utils.getSession('userType');
		if(userType == 1){//老师
			this.menuList[3].children = this.subMenuList.concat(this.teacherlist);
		}
		else{
			this.menuList[3].children = this.subMenuList;
		}
	},
    
    methods:{
        changeTab(rank,item,index){
            if(rank == "1"){
                this.flag = index;
				this.itemFlag = -1;
            }
            else{
                this.itemFlag = index;
            }
			if(!item.children){
				this.$router.push({
				    path:item.url
				})
			}
        }
    },
	
	watch: {
	    $route(val) {
			if(val.path == "/my-work"){
				this.itemFlag = 0
			}
			else if(val.path == "/my-collect"){
				this.itemFlag = 1
			}
			else if(val.path == "/my-integral"){
				this.itemFlag = 2
			}
			else if(val.path == "/my-student"){
				this.itemFlag = 3
			}
			else if(val.path == "/student-work"){
				this.itemFlag = 4
			}
	    }
	}
};
</script>

<style lang="scss" scoped>
.sidebar {
	max-width: 200px;
    position: absolute;
	left: 0;
    top: 92px;
    bottom: 0;
    background: #fff;
	ul{
		padding-top: 40px;
		width: 100%;
		height: 100%;
		padding-left: 12px;
		box-sizing: border-box;
		li{
			cursor: pointer;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 100%;
			height: 44px;
			line-height: 44px;
			margin-bottom: 30px;
			text-align: center;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #595959;
			img{
				width: 17px;
				height: 16px;
				vertical-align: middle;
                margin-right: 18px;
			}
			span{
				vertical-align: middle;
			}
			.menu-item{
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
			}
			.item-active{
				color: #FF8D1B;
			}
		}
		.current{
			width: 188px;
			height: 44px;
			background: rgba(253, 133, 13, 0.1);
			border-radius: 22px 0px 0px 22px;
			color: #FD850D;
		}
	}
    
}

</style>
